<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">

		<title>08CSS위치표시여부</title>
	</head>

	<body>
		<h1>CSS위치표시여부</h1>
		<h2>CSS위치지정 : position</h2>
		<p>
			html요소를 어떻게 배치할지를 정의
		</p>
		<p>
			위치지정은 position,top,left속성을 이용
			<br />
			static:문서 내용의 흐름에 따라 배치(위-아래)
		</p>
		<div style="width: 250px; height: 150px; background:red; position: static; top: 300px; left: 300px;">static </div>
		<hr />
		<p>absolute : 조상요소(body)를 기준으로 배치</p>
		<div style="width: 250px; height: 150px; background:skyblue; position: absolute; top: 150px; left: 350px;">absolute </div>
		
		<hr />
		<p>relative : 현재 위치에서 지정한 위치로 이동</p>
		<div style="width: 250px; height: 150px; background:#808080; position: relative; top: 150px; left: 350px;">relative </div>
		
		<hr />
		<p>fixed : 지정한위치에서 고정(absoulte + 고정)</p>
		<div style="width: 250px; height: 150px; background: yellow; position: fixed; top: 0px; left: 350px;">fixed </div>
		
		<hr />
		<h2>요소 겹치기 : z-index</h2>
		<p>absolute, relative,fixed에서만 요소를 겹칠 수 있음.</p>
		<div style="width: 250px; height: 150px; background: gray; position: relative; top: 0px; left: 0px;">#0 </div>
		<div style="width: 250px; height: 150px; background: green; position: relative; top:-50px; left: 50px; z-index: 10">#1</div>
		<div style="width: 250px; height: 150px; background: purple; position: relative; top:-100px; left: 100px;">#2 </div>
		
		<hr />
		<h2>요소 표시하기 : display,visibility</h2>
		<p>display :none/block,inline - 요소가 차지한 영역도 제거 </p>
		<p>visibility : hidden/visible - 요소가 차지한 영역은 제거안함</p>
		<div style="width: 100px; height: 150px; background: white; border: 1px solid red; display: non;float: left;">display: remove </div>

 		<div style="width: 100px; height: 150px; background: red; border: 1px solid red; visibility : hidden; float: left; ">visibility: hidden </div>
		<div style="width: 100px; height: 150px; background: skyblue; border: 1px solid red; float: left;"> 고정</div>
				
		<hr / style="clear: both">
		<h2>display 속성 : 박스모델의 유형을 정의</h2>
		<p>block : 현재 요소를 블럭 요소로 보이게함</p>
		<p>inline : 현재 요소를 인라인 요소로 보이게함</p>
		<p>inline-block : 현재 요소는 인라인 요소로 보이게 하되 블록 요소의 특성을 사용할 수 있게 함.</p>
		
		<p>시간은<span style="background: orange; display: block"> 금이라구</span> 친구</p>
		<div>시간은<p style="background: orange; display : inline"> 금이라구<p> 친구</div>
		<p>시간은 <span style="background: orange; display : inline-block"> 금이라구</span> ,친구!</p>
		
		<div style="background: orange; display : inline-block">시간은<p> 금이라구</p> 친구</div>
		
		<span>아아아앙
			<div style="background: orange; display : inline-block">시간은<p> 금이라구</p> 친구</div>
		
			
			</span>
		
	</body>

</html>
	